@charset "utf-8";

@import "./reset.scss";
@import "./common.scss";

@function getvw($w) {
    @return $w / 1920 * 100 + vw;
}

nav{
    ul{
        li:nth-child(4){
            a{
                color: #ff4a11;
            }
        }
    }
}

main{
    width: 100%;
    .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        h1{
            font-size: getvw(65);
            margin-top: getvw(105);
        }
        p{
            font-size: getvw(25);
            margin-top: getvw(20);
            letter-spacing: getvw(20);
            color: #cccccc;
        }
        span{
            font-size: getvw(20);
            margin-top: getvw(30);
            color: #888888;
        }
        .photo{
            width: getvw(1400);
            margin-top: getvw(90);
            ul{
                display: flex;
                flex-wrap: wrap;
                li:nth-child(1),
                li:nth-child(2),
                li:nth-child(5),
                li:nth-child(6){
                    img{
                        width: getvw(700);
                        height: 100%;
                    }
                }
                li:nth-child(3),
                li:nth-child(4),
                li:nth-child(7),
                li:nth-child(8){
                    img{
                        width: getvw(1400);
                        height: 100%;
                    }
                }
            }
        }
    }
}
footer{
    margin-top: getvw(150);
}

//后面添加效果的类名
.move{
    transform: translateY(getvw(-60));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.aF{
    transform: translateX(getvw(-60)) translateY(getvw(-90));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.bF{
    transform: translateX(getvw(60)) translateY(getvw(-90));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.cF{
    transform: translateY(getvw(-30));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.dF{
    transform:  translateY(getvw(30));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.eF{
    transform: translateX(getvw(-60)) translateY(getvw(90));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.fF{
    transform: translateX(getvw(60)) translateY(getvw(90));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.gF{
    transform: translateY(getvw(150));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}
.hF{
    transform: translateY(getvw(180));
    box-shadow: getvw(50) getvw(30) getvw(20) gray;
    transition: all ease 1s;
}